A variety of programs on the market allow a developer (e.g., a web developer) to create web pages, websites, interactive applications, and the like for use by end users (e.g., visitors to websites). Examples of such programs include DREAMWEAVER™ and FLEX BUILDER™, each available from MACROMEDIA INC. of San Francisco, Calif. DREAMWEAVER™ is an Integrated Development Environment (IDE) for creating Hypertext Markup Language (HTML) websites. Examples of other HTML IDEs include GOLIVE®, available from Adobe Systems Incorporated, and FRONTPAGE™, available from Microsoft Corporation. FLEX BUILDER™ is an IDE for creating Rich Internet Applications (RIAs), which are interactive, multimedia applications, that may run on client-side players, for example, MACROMEDIA INC.'s FLASH™ player. FLEX BUILDER™ uses MXML™ as its native development code for RIAs. MXML™ is an Extensible Markup Language (XML)-based language commonly used to create RIAs. MXML™ code looks similar in some ways to HTML. For example, MXML™ uses many tags in common with HTML. A developer may write code in a text editor or FLEX BUILDER™ and save the MXML™ file to the FLEX™ server, which is a presentation level server for RIAs. The FLEX™ server includes a compiler that compiles the code into a file, such as a Small Web Format (SWF) file, that can be downloaded and executed on a user's machine. SWF is the native file format for the FLASH™ player.
FIG. 1 is an illustration of example system 100, adapted to provide a RIA to an Internet user. System 100 uses MACROMEDIA's FLEX™ server and FLASH™ player. System 100 includes server 101 with compiler functionality, network 102 (e.g., the Internet), downloaded file 103, and user computer 104 with FLASH™-enabled web browser client program 105. A developer builds a RIA that includes a UI and saves it in an MXML™ file on server 101. When a user at computer 104 requests the RIA, server 101 accesses the MXML™ file and compiles it into SWF (commonly pronounced “swiff”) file 103. SWF file 103 contains, among other things, bytecodes. SWF file 103 is downloaded by browser 105 over network 102 for display to the user. While system 102 uses a FLEX™ server and FLASH™ player, other systems may use different software and file formats while operating similarly, such as systems that employ Microsoft Corporation software or Real Networks software.
The FLEX™ server provides a way to generate SWF file 103 through use of the compiler. As explained above, a developer may open FLEX BUILDER™ or a text editor, create a document with MXML™ tags, and save the file as an MXML™ file to server 101, which is a the FLEX™ server with a compiler. After the compiler compiles the saved code into SWF file 103, the application may then be run on, for example, web browser 105 that is enabled with a FLASH™ player plug-in.
FLASH™-based applications are known for interactive graphics and animation, and the appearance of the graphics is due, in large part, to styles applied to the UI objects. In a typical FLEX BUILDER™ development scenario, a developer creates the graphics from pre-built vector graphic components. Then, the developer applies styles to control how the graphics appear.
Cascading Style Sheets (CSS) is a language that was created specifically for use in HTML web pages to apply styles to visual objects. CSS was developed in an attempt to separate presentation formatting from structure formatting and content. In a general sense, styles usually affect the visual appearance of an object, and include, for example, color and font size, whereas structure formatting usually specifies the objects and arrangement thereof on a user's screen. Just as HTML web pages utilize CSS, applications created with MXML™ also make use of CSS to apply style formatting.
CSS helps to separate structure from presentation in HTML and MXML™ documents. A simple example in HTML begins with a paragraph tag, (<p>, a “P tag”). The purpose of a paragraph tag is to specify a paragraph of content. For example, a developer will place a P tag before text content and end the text content with an end P tag (</p>). The result is that the text appears as a paragraph somewhere on the UI. Creating a paragraph is an example of structure formatting. The appearance of the paragraph is presentation format.
The earliest web applications attached appearance right to the paragraph tag or to other tags embedded within the paragraph, to specify, for example, font, font size, font color, and the like. Additionally, a style can be applied to a tag near the root of a document so that it applies to all of the children of that tag; however, such a style can be explicitly overridden in an individual tag. In MXML™, other tags may exist, such as data grids, buttons, panels, date choosers, and the like, and the rules are substantially the same when applying styles through CSS.
A problem that often arises with such an approach is that the presentation formatting is intermixed with the content or structure. If an artist desires to change the appearance of the text, the artist must interact with the content directly. In the industry, the people who design the structure and the people who update the appearance are usually separate individuals or groups, and it is often convenient to keep those two parts of the application document separate. Thus, instead of specifying the appearance of a UI object directly in the content, it may be desirable to separate presentation formatting into styles in a separate CSS style sheet. Later web applications utilize separate CSS style sheet files to specify the appearance. In other words, there is an independent style sheet file, a CSS file, that specifies the applicable styles. In fact, a given style sheet file can also be applied to several different HTML or MXML™ documents.
Regarding styles themselves, any given style is a name of a property and a value, i.e., a property-value pair. For example, a name of a property may be font family, the value may be Arial or Geneva. Another example of a property name might be background-color and the value might be red. Currently, the available values for the style properties are scalars.
A limitation of CSS, whether in the context of RIAs or HTML web pages, is that it only accepts scalars or simple arrays of integers and strings as values of styles. It is often very difficult if not impossible to apply a presentation style that has any arbitrary amount of complexity. For example, a linear gradient that changes color from one side of the screen to another is much harder to apply than simply specifying that background color is blue. Currently, a linear gradient is not easily expressible as a string because it has a number of values to be grouped together. A developer would have to express the desired appearance using a string, and the string would be very unwieldy. When style properties are limited to strings and integers, it is very difficult not only to express a linear gradient, but also complex polygonal shapes, bit map representations, and the like. At this point, scalar values cease to be expressive enough to describe these complex types of appearances.